<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2025-01-08 09:19:08
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-19 10:03:49
 * @FilePath: \web-appc:\Users\wuheng\Desktop\Wugangrestaurant\hbzc-groupmeal-restaurant-web\src\restaurantViews\purchasing\purchaseorder\components\edit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="editchaseorde">
    <pb-drawer v-model="isVisible" :title="'采购单汇总明细'" :direction="'btt'" :size="'92%'" @cancelFn="CancelFn"
      @confirmFn="confirmFn">
      <div class="flex top">
        <div>供应商名称：</div>
        <div>{{ viewData.supplierName }}</div>
        <div>到货日期：</div>
        <div>{{ viewData.deliveryDate }}</div>
      </div>
      <pb-table :column="editColumn" :loading="loading" :tableData="editData" :bottomElement="['pb-page']" height="580"
        :indexWidth="60">
      </pb-table>
      <template #footer></template>
    </pb-drawer>
  </div>
</template>
<script setup lang="ts">
import { GetSummaryDetailsListApi } from '@/api/Purchasing'
const isVisible = ref(false)
const loading = ref(false)
let viewData: any = reactive({
  deliveryDate: '',
  supplierName: ''
} as any)
const editData = ref([])
const editColumn = ref([
  {
    key: "skuName",
    name: "商品名称",
    width: 100
  },
  {
    key: "skuClassName",
    name: "商品种类",
    width: 100
  },
  {
    key: "summaryQuantity",
    name: "合计",
    width: 100,
    align: "right",
  },
  {
    key: 'accountingUnitName',
    name: "计量单位（采购）",
    width: 150
  }, {
    key: 'specifications',
    name: "规格",
    width: 100
  }
] as any)
const confirmFn = () => {

}
const getDatiltableFn = () => {
  loading.value = true
  GetSummaryDetailsListApi({
    "currentPage": 1,
    "pageSize": -1,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "purchaseSummaryId": viewData.purchaseSummaryId
  }).then(res => {
    editData.value = res.data.records
    editData.value.map((record: any) => {
      record.supplyTenantList.forEach((tenant: any) => {
        if (tenant.supplyTenantId) {
          record[tenant.supplyTenantId] = tenant.purchaseQuantity;
          editColumn.value.push({
            key: tenant.supplyTenantId,
            name: tenant.supplyTenantName
          })
        }
      })
    })
    const seenTenantIds = {};
    editColumn.value = editColumn.value.filter(item => {
      // 检查当前项的supplyTenantId是否已经在seenTenantIds中
      if (!seenTenantIds[item.key]) {
        // 如果还没有遇到过，将其标记为已遇到
        seenTenantIds[item.key] = true;
        // 并返回true，表示这项应该被包含在过滤后的数组中
        return true;
      }
      // 如果已经遇到过，返回false，表示这项应该被排除
      return false;
    });
    // console.log(editData.value, '22321')
    loading.value = false
  }).catch(err => {
    loading.value = false
  })
}
const CancelFn = () => {
  isVisible.value = false
}
const show = (row: any) => {
  Object.assign(viewData, {})
  viewData.deliveryDate = ''
  viewData.supplierName = ''
  Object.assign(viewData, row)
  getDatiltableFn()
  nextTick(() => {
    isVisible.value = true
  })
}
defineExpose({
  show
})
</script>
<style lang="scss" scoped>
.editchaseorde {
  .top {
    padding-top: 24px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    align-items: center;
    margin-bottom: 16px;

    >div:nth-child(2n) {
      line-height: 22px;
      min-width: 102px;
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 20px;
    }

    .colorgreen {
      font-family: DIN, DIN;
      font-weight: 500;
      font-size: 16px;
      color: #0D968B;
      line-height: 24px;
    }

    .smallspan {
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>